{% extends "../layouts/admin.html" %} {% block content %}

<header class="header navbar bg-white shadow">

	<div class="pull-right offscreen-right">
		<button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
          class="fa fa-sliders"></i> 筛选
      </button>
	</div>
</header>
<div class=panel-body style="padding-top: 50px;">
	<div class="table-responsive no-border">
		<input id="unitid" type="hidden">
		<table class="table table-bordered table-striped mg-t datatable">
			<thead>
				<tr>
					<th>商品ID</th>
					<th>用户ID</th>
					<th>商品名称</th>
					<th>售价</th>
					<th>销量</th>
					<th>图片</th>
					<th>已关注</th>
					<th>创建时间</th>

		</table>
	</div>
</div>
<div class="cd-panel from-right">
	<header class="cd-panel-header">
		<h4>高级筛选</h4>
	</header>
	<div class="cd-panel-container">
		<div class="cd-panel-content shadow">
			<div class="form-group">
				<label for="userid">用户ID</label>
				<input type="text" id="userid" name="userid" onclick="this.value=''" class="form-control" placeholder="用户ID">
			</div>
			<div class="form-group">
				<label for="goodsid">商品ID</label>
				<input type="text" id="goodsid" name="goodsid" onclick="this.value=''" class="form-control" placeholder="商品ID">
			</div>

			<button id="searchBtn" type="button" class="btn btn-default">查询</button>
		</div>
	</div>
</div>

<script language="JavaScript">
	function initDatatable() {
		datatable = $('.datatable').DataTable({
			"dom": '<"toolbar">frtip',
			"searching": false,
			"processing": false,
			"serverSide": true,
			"select": true,
			"ordering": true,
			"language": {
				"url": "/assets/plugins/datatables/cn.json"
			},
			"preDrawCallback": function() {
				sublime.showLoadingbar($(".main-content"));
			},
			"drawCallback": function() {
				sublime.closeLoadingbar($(".main-content"));
			},
			"ajax": {
				"url": "/store/collect/index",
				"type": "post",
				"data": function(d) {
					d.userid = $('#userid').val();
					d.goodsid = $('#goodsid').val();

				}
			},
			"order": [
				[0, 'desc']
			],
			"columns": [{
					"data": "goods_id",
					"bSortable": true
				},
				{
					"data": "user_id",
					"bSortable": true
				},
				{
					"data": "goods.name",
					"bSortable": false
				},
				{
					"data": "goods.retail_price",
					"bSortable": false
				},
				{
					"data": "goods.sell_volume",
					"bSortable": false
				},
				{
					"data": "goods.list_pic_url",
					"bSortable": false
				},
				{
					"data": "is_attention",
					"bSortable": true
				},
				{
					"data": "create_time",
					"bSortable": true
				}

			],
			"columnDefs": [

				{
					"render": function(data, type, row) {
						return "<img src='" + data + "' onclick=sublime.picture('" + data + "')>"
					},
					"targets": 5
				}, {
					"render": function(data, type, row) {
						if(data == 1) {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
						} else {
							return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
						}
					},
					"targets": 6
				}, {
					"render": function(data, type, row) {
						return sublime.datetime(data);
					},
					"targets": 7
				}
			]
		});

		$("#searchBtn").on('click', function() {
			datatable.ajax.reload();
		});
	}

	

	$(function() {
		initDatatable();
	});
</script>
{% endblock %}